<template>
  <div class="toast" v-if="msg">
    <i v-if="toastSuccessMsg" class="if icon-toast-correct success"></i>
    <i v-if="toastWarningMsg" class="if icon-warning warning"></i>
    {{msg}}
  </div>
</template>

<script>
import { mapGetters, mapState, mapActions } from 'vuex'

export default {
  props: {
  },
  computed: {
    ...mapGetters([
      'toastSuccessMsg',
      'toastWarningMsg',
    ]),
    msg () {
      return this.toastSuccessMsg || this.toastWarningMsg
    }
  },
  watch: {
    msg (nv) {
      if (!nv) return
      if (this.st) clearTimeout(this.st)
      this.st = setTimeout(() => {
        this.$store.commit('UI_SET_TOAST_WARNING_MSG', '')
        this.$store.commit('UI_SET_TOAST_SUCCESS_MSG', '')
      }, 2000)
    }
  }
}
</script>

<style scoped lang="less">
.toast {
  position: fixed;
  z-index: 10000;
  background-color: rgba(0,0,0,.65);
  left: 50%;
  top: 50%;
  color: white;
  transform: translate(-50%, -50%);
  border-radius: 8px;
  padding-right: 22px;
  padding: 24px;
  i {
    &.warning {
      color: #FCCF22;
      font-weight: bold;
    }
    &.success {
      color: #00CFCB;
      font-weight: bold;
    }
  }
}
</style>
